<script setup lang="ts">
import { ElInput, ElMessage } from 'element-plus'
import WaterBlock from '@/components/water-block.vue'
import { computed, ref } from 'vue'

const correct = ref(0)
const wrong = ref(1)
const a = computed(() => correct.value * 0 + 11 + Math.floor(Math.random() * 9))
const b = computed(() => correct.value * 0 + 11 + Math.floor(Math.random() * 9))
const c = computed(() => String(a.value * b.value))

const answer = ref('')

const checkAnswer = () => {
  if (answer.value == c.value) {
    ElMessage({
      message: '恭喜你答对了！',
      type: 'success',
    })
    correct.value++
    answer.value = ''
  } else {
    ElMessage({
      message: '很遗憾，答错了！',
      type: 'error',
    })
    wrong.value++
  }
}
</script>

<template>
  <div class="container">
    <WaterBlock :rate="correct / (correct + wrong)" class="rate"></WaterBlock>
    <div class="text">
      {{ a }} × {{ b }} =
      <el-input v-model="answer" @change="checkAnswer" class="answer" />
    </div>
  </div>
</template>

<style scoped>
.container {
  display: grid;
  grid-template-rows: 1fr 2fr;
  justify-items: center;
  width: 80vw;
  height: 80vh;
}

.rate {
  width: 40vw;
  height: 40vw;
}

.text {
  font-size: 5rem;
  font-family: 'Times New Roman', Times, serif;
}

.answer ::v-deep(.el-input__inner) {
  /* border-bottom: 3px solid rgb(165, 158, 158); */
  width: 1rem;
  height: 5rem;
  font-size: 5rem;
  font-family: 'Times New Roman', Times, serif;
  background-color: inherit;
  outline: none;
  border: 0px;
}

@media screen and (max-width: 768px) {
  .text {
    font-size: 3rem;
  }
  .answer ::v-deep(.el-input__inner) {
    font-size: 3rem;
  }
}
</style>
